<template>
  <div class="popup-wrapper" v-show="popup.show" :style="{ left: popup.left, top: popup.top }">
    <div class="title">
      <span>阳光花园</span>
    </div>
    <div class="content" v-if="popup.feature">
      <!-- 这里的内容，在数据集里完善自己想要展示的字段信息，在这里展示就可以了 -->
      <span>ID:</span>
      <span>{{ popup.feature.ID }}</span>
      <br>
      <span>小区名:</span>
      <span>{{ popup.feature.fieldValues['19'] }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import positiveX from './assets/images/tycho2t3_80_px.jpg'
import negativeX from './assets/images/tycho2t3_80_mx.jpg'
import positiveY from './assets/images/tycho2t3_80_py.jpg'
import negativeY from './assets/images/tycho2t3_80_my.jpg'
import positiveZ from './assets/images/tycho2t3_80_pz.jpg'
import negativeZ from './assets/images/tycho2t3_80_mz.jpg'
import axios from 'axios'
import { ref, watch, onMounted, Ref } from 'vue';
let popup: any = ref({ left: '0px', top: '0px', show: false, feature: null }), viewer: any = null, targetLayer: any = null, scene: any = null, houseList: [] = [], listShowFlag = ref(false), buildingIDs: any[] = [], floorIDs: any[] = [], translation: any = new Cesium.Cartesian3(0, -60, 0), car3Position: any = null

onMounted(async () => {
  initViewer()
})


const initViewer = async () => {
  viewer = new Cesium.Viewer("app", {
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      url: 'http://124.128.48.215:8083/tileservice/dsfg_asdxb',
      layer: 'dsfg_asdxb',
      style: 'default',
      format: 'image/png',
      tileMatrixSetID: 'dsfg_asdxb',
      tileMatrixLabels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
      maximumLevel: 19,
      tilingScheme: new Cesium.GeographicTilingScheme()
    }),
    sceneMode: Cesium.SceneMode.SCENE3D,
    vrButton: false,
    animation: false,
    baseLayerPicker: false,
    geocoder: false,
    timeline: false,
    fullscreenButton: false,
    homeButton: false,
    creditContainer: document.createElement('div'),
    infoBox: false,
    navigationHelpButton: false,
    sceneModePicker: false,
    scene3DOnly: true,
    skyBox: new Cesium.SkyBox({
      sources: {
        positiveX,
        negativeX,
        positiveY,
        negativeY,
        positiveZ,
        negativeZ,
      }
    })
  });
  viewer.clock.currentTime = Cesium.JulianDate.fromIso8601('2023-03-29T01:05:45-06:00')
  scene = viewer.scene
  scene.globe.depthTestAgainstTerrain = true;
  scene.sun.show = true
  const s3mLayers = await viewer.scene.open('http://localhost:8090/iserver/services/3D-building/rest/realspace')

  targetLayer = s3mLayers[0]
  targetLayer.setLodRangeScale(0.1)

  const screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
  screenSpaceEventHandler.setInputAction(async (e: any) => {
    targetLayer.removeAllObjsColor()
    targetLayer.removeAllObjsTranslate()
    car3Position=null
    popup.value.show = false
    let obj = scene.pick(e.position)
    if (obj) {
      let features = await getFeatureByID(obj.id)
      if (features.length > 0) {
        popup.value.feature = features[0]
        targetLayer.setSelection(obj.id)
        targetLayer.setObjsTranslate([obj.id], translation)
        viewer.camera.flyToBoundingSphere(obj.primitive._boundingSphere)
        let origin =scene.pickPosition(e.position)
        car3Position = Cesium.Cartesian3.add(origin, new Cesium.Cartesian3(-5, 20, -20), new Cesium.Cartesian3());
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.add(origin, new Cesium.Cartesian3(-50, 100, -70), new Cesium.Cartesian3()),
          orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(-30),
            roll: 0.0
          },
        });
        viewer.camera.changed.addEventListener(computedPopupPosition)
      }
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

const computedPopupPosition = () => {
  if (!car3Position) return
  let windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, car3Position)
  popup.value.left = windowPosition.x + 'px'
  popup.value.top = windowPosition.y - 150 + 'px'
  popup.value.show = true
}

const getFeatureByID = async (id: Number) => {
  let features = (await axios({
    method: 'post',
    url: 'http://localhost:8090/iserver/services/data-building/rest/data/featureResults.json?returnContent=true',
    data: JSON.stringify({
      getFeatureMode: "ID",
      datasetNames: ["fenceng:fc"],
      ids: [id]
    }),
  })).data.features
  return features
}
</script>

<style lang="css" scoped>
button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}

.popup-wrapper {
  position: absolute;
  z-index: 100;
  top: 200px;
  left: 200px;
  width: 200px;
  height: 157px;
  background-image: url('/images/div2.png');
  padding-left: 42px;
  color: white;
  box-sizing: border-box;
  font-size: 14px;
}

.popup-wrapper .title {
  width: 100%;
  padding: 21px 0px 0px 20px;
}

.popup-wrapper .content {
  line-height: 56px;
  padding-left: 20px;
  line-height: 20px;
}

.floor-panel {
  position: absolute;
  z-index: 10;
  top: 100px;
  left: 100px;
  background-color: gray;
  width: 400px;
}

.floor-item {
  float: left;
  width: 100px;
  height: 30px;
  background-color: antiquewhite;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.floor-item:hover {
  background-color: aquamarine;
}
</style>
